/**
 * VUEshop
 * ============================================================================
 * * 版权所有 2015-2027 深圳搜豹网络科技有限公司，并保留所有权利。
 * 网站地址: http://www.vueshop.com.cn
 * ----------------------------------------------------------------------------
 * 这不是一个自由软件！您只能在不用于商业目的的前提下对程序代码进行修改和使用 .
 * 不允许对程序代码以任何形式任何目的的再发布。
 * ============================================================================
 * $Author: 沈小白 2020-07-22 $
 */<template> 
    <view class="wrap">
        <view class="head">
            <image class="icon-wxchat icon" :src="imgUrl+'login/wxchat.png'"></image>
            <image class="icon-chain icon" :src="imgUrl+'login/chain.png'"></image>
            <image class="icon login icon" :src="logo?logo:imgUrl+'login/login.png'"></image>
        </view>
        <view class="tips">绑定后，您可用<text>微信账号</text> 或<text>手机号</text>登录商城</view>
        <view class="mobile box">
            <input type="number" placeholder="请输入手机号码" v-model="mobile" placeholder-class="place"/>
        </view>
        <view class="yzm box">
            <input type="number" placeholder="请输入验证码" v-model="code" placeholder-class="place"/>
            <view class="send" @tap="send" v-if="is_send">立即发送</view>
            <view class="send" :class="[is_send?'':'btn-select']" @tap="ToResend" v-if="!is_send">重新发送<block v-if="!is_send">（{{countDownNum}}s）</block></view>
        </view>
        <login-link :ishide="isSelect" @updateHide="updateHide"></login-link>
        <view class="bind-btn" :class="[isFlag?'bind-btn-select':'']" @tap="bindwx">完成绑定</view>
        <!-- 操作错误信息 -->
        <error-template ref="errorTem" :errorText="errorText" type="1"></error-template>
    </view>
</template>
<script>
import loginLink from "../components/login-link"; 
import sendSmsMixin from "@/mixin/sendSms.js";
import ErrorTemplate from "@/components/ErrorTemplate/ErrorTemplate";
import {login} from "@/api/api.js";
import config from "@/api/config";
import common from "@/common/common";
import { mapActions, mapMutations, mapState } from "vuex";
export default {
    data() {
        return {
            imgUrl:config.imgUrl,
            isSelect:true,
            mobile:"",
            code:"",
            timer:null,
            scene:"6", //身份验证
            errorText:"",//错误信息
            logo:"",
            is_send:true,
            sms_sms_time_out:""
        }
    },
    mixins: [sendSmsMixin],
    computed: {
        isFlag(){
            if(this.mobile&&this.code&&!this.isSelect){
                return true
            }else{
                return false
            }
        },
        countDownNum:{//短信验证码有效时间
            get:function(){
                return this.sms_sms_time_out
            },
            set:function(val){
                clearInterval(this.timer) 
                this.sms_sms_time_out=val;
                
            }
            
        },
        ...mapState(['config']),
        
    },
    components:{
        loginLink,
        ErrorTemplate
    },
    onLoad(){
        // this.logo=
        if(this.config.shop_info_wap_home_logo.indexOf('public')==1){
            this.config.shop_info_wap_home_logo=config.host+this.config.shop_info_wap_home_logo;
        }
        this.logo=this.config.shop_info_wap_home_logo
        this.sms_sms_time_out=this.config.sms_sms_time_out;
        console.log(this.logo);
    },
    methods: {
        ...mapMutations(["login", "getToken", "updateOpenFlag"]),
        ...mapActions(["getUser"]),
        bindwx(){
            if(!this.mobile){
                this.errorText="手机号不能为空";
                this.$refs.errorTem.open(3000)
                return
            }
            if(!(/^1[3456789]\d{9}$/.test(this.mobile))){
                this.errorText="手机号格式不正确";
                this.$refs.errorTem.open(3000)
                return
            }
            if(!this.code){
                this.errorText="验证码不能为空";
                this.$refs.errorTem.open(3000)
                return 
            }
            if(this.isSelect){
                this.errorText="请勾选登录注册协议";
                this.$refs.errorTem.open(3000)
                return  
            }
            let params={
                mobile:this.mobile,
                code:this.code,
                oauth:"weixin",//三方标识
                openid:"oCd_TsnQcjHP3HMKS82ua1ebc-mM"
            }
            this.login(params)

        },
        login(params){
            login(params).then(res=>{
                if (res) {
                    if (!res.msg) {
                        getApp().globalData.userInfo = res;
                        let token = res.token_type + res.access_token;
                        this.getToken(token);
                        let loginInfo = {
                            token: res.token_type + res.access_token,
                            user_id: res.user_id,
                        };
                        uni.setStorageSync("userInfo", res);
                        uni.setStorageSync("loginInfo", loginInfo);
                        /*登录成功 调用户信息*/
                        this.getUser()
                        this.errorText="提交成功";
                        this.$refs.errorTem.open(3000)
                        setTimeout(this.jump, 3000);
                    }
                }
            })
        },
        send(){ //发送短信
            if(!this.mobile){
                this.errorText="手机号不能为空";
                this.$refs.errorTem.open(3000)
                return
            }
            if(!(/^1[3456789]\d{9}$/.test(this.mobile))){
                this.errorText="手机号格式不正确";
                this.$refs.errorTem.open(3000)
                return
            }
            let params={
                mobile:this.mobile,
                scene: this.scene,
            }
            this.sendSms(params)
            this.getTime()
        },
        /*时间计时器*/
        getTime(){
            let that=this;
            that.timer=setInterval(()=>{
                if(that.countDownNum==0){
                    clearInterval(that.timer)
                    that.is_send=false;
                    that.countDownNum=that.config.sms_sms_time_out;
                    return
                }else{
                    that.countDownNum--;
                }
            },1000)
        },
         //跳转
        jump() {
            common.jump();
        },
    // 监听子组件  勾选 登录协议
        updateHide(e){
            this.isSelect=e;
        },
    },
    destroyed() {
        clearInterval(this.timer) 
    },
}
</script>
<style lang="scss">
    page{
        background: #fff;
    }
    .wrap{
        margin: 0 70rpx;
    }
    .head{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        margin-top: 60rpx;
        .icon{
            width: 84rpx;
            height: 84rpx;
            border-radius: 10rpx;
        }
        .icon-chain{
            margin: 0 8rpx;
        }
    }
    .tips{
        margin-top: 46rpx;
        color: #999;
        font-size: 24rpx;
        text-align: center;
        text{
            color: #333333;
        }
    }
    .box{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 36rpx 0;
        border-bottom: 1px solid #E6E6E6;
        input{
            color: #333;
            font-size: 36rpx;
        }
        .send{
            position: relative;
            color: #333333;
            font-size: 30rpx;
        }
        .send::before{
            content: "";
            width: 1px;
            height: 48rpx;
            background: #E6E6E6;
            position: absolute;
            left: -20rpx;
        }
         .btn-select{
            font-size: 28rpx;
            color: #9A9A9A;
        }
    }
    .yzm{
        margin-bottom: 30rpx;
    }
    .place{
        color: #ccc;
        font-size: 30rpx;
    }
    .bind-btn{
        width:610rpx;
        height:90rpx;
        background:#CCCCCC;
        border-radius:45rpx;
        line-height: 90rpx;
        color: #FFFFFF;
        font-size: 30rpx;
        text-align: center;
        margin-top: 100rpx;
    }
    .bind-btn-select{
        background:linear-gradient(90deg,rgba(255,59,59,1) 0%,rgba(255,93,61,1) 100%);
    }
   
</style>